<template>
	<view class="feedBack-view">
		<view class="w-100 bg-f u-bdr-16 feed-center u-m-b-42">
			<view class="space-between u-m-b-28">
				<view class="u-f-32">问题描述</view>
				<view class="w-s-color-9 u-f-24">{{content.length}}/300</view>
			</view>
			<view class="w-100 feed-fill">
				<textarea v-model="content" class="w-100 h-100" placeholder="具体清晰的描述有助于我们快速解决您的问题" placeholder-class="w-s-color-9 u-f-24" maxlength="300"></textarea>
			</view>
			<u-upload ref="uUpload" name="file"  @on-success="successImg" @on-remove="removeImg"
				iconName="camera" max-count="1" :action="action"></u-upload>
		</view>
		<button class="flex-center u-f-32 w-s-color-f u-bdr-40 bg-primary feed-btn" :disabled="disabled" :loading="disabled" @click="subClick">{{disabled ? '提交中' : '提交'}}</button>
	<u-toast ref="uToast" />
	</view>
</template>

<script>
	import configdata from '@/common/config.js';
	export default {
		data() {
			return {
				content:"",
				action:configdata.APIHOST + '/alioss/upload',
				imgs:'',
				disabled:false
			};
		},
		onLoad() {},
		methods: {
			successImg(data, index, lists, name) {
				this.imgs=data.data
			},
			removeImg(index, list, name) {
				this.imgs=''
			},
			subClick(){
				if(this.content==''){
					this.$refs.uToast.show({
						title: '请输入问题',
						type: 'error'
					});
					return
				}
				this.disabled=true
				this.$u.post('/app/message/insertMessage', {
					content:JSON.stringify({content:this.content}),
					image:this.imgs,
					state: 2
				}).then(res=>{
					this.$refs.uToast.show({
						title: '提交成功',
						type: 'success',
						back:true
					});
				}).catch(err=>{
					this.disabled=false
				})
			}
		}
	};
</script>

<style lang="less">
	page{
		background: #F7F8FF;
	}
	.feedBack-view{
		width: 100vw;
		padding: 22rpx 32rpx;
		.feed-center{
			box-shadow: 0rpx 0rpx 32rpx 2rpx rgba(0,0,0,0.03);
			padding: 42rpx 36rpx;
			.feed-fill{
				height: 270rpx;
			}
			/deep/.u-add-wrap {
				background: transparent !important;
				border: 1rpx dashed #707070;
			}
		}
		.feed-btn{
			height: 80rpx;
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0,0,0,0.16);
		}
	}
</style>